import React, { Component } from "react";
import * as echarts from "echarts";
import Pts from "prop-types";
class Pie extends Component {
  // 对props中的参数进行类型的校验
  static propTypes = {
    id: Pts.string.isRequired,
    text: Pts.string.isRequired,
    data: Pts.array.isRequired,
    title: Pts.string.isRequired,
  };

  // 给props 设置默认的一些参数
  static defaultProps = {
    w: "33.3%",
    h: "500px",
  };
  render() {
    // console.log('饼图数据', this.props.data);
    var chartDom = document.getElementById(this.props.id);
    // console.log('dom容器', chartDom);
    // 判断可以获取到dom 时,创建echarts 图表
    if (chartDom) {
      // 第二次执行的render的时候
      var myChart = echarts.init(chartDom);
      var option;
      option = {
        title: {
          text: this.props.text,
          subtext: "2022年统计",
          left: "center",
        },
        tooltip: {
          trigger: "item",
        },
        // legend: {
        //     orient: 'vertical',
        //     left: 'left'
        // },
        series: [
          {
            name: this.props.title,
            type: "pie",
            radius: "60%",
            data: this.props.data,
            emphasis: {
              itemStyle: {
                shadowBlur: 10,
                shadowOffsetX: 0,
                shadowColor: "rgba(0, 0, 0, 0.5)",
              },
            },
          },
        ],
      };

      // 判断是否当前饼图有图例
      if (this.props.legend) {
        option["legend"] = {
          orient: "vertical",
          left: "left",
        };
      }
      option && myChart.setOption(option);
    }
    return (
      <div
        id={this.props.id}
        style={{ width: this.props.w, height: this.props.h }}
      ></div>
    );
  }
  componentDidMount() {}
}

export default Pie;
